<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>积分商城</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/styleold.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/integral.css" />
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-tab.js" ></script>
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
    <script type="text/javascript">
        function closeWin(){
            api.closeWin({
            });

            var n = api.pageParam.index;
            if (n == null) {
                n = 0;
            }
            page = n;
        };
    </script>
</head>
<body>

    <header class="aui-bar aui-bar-nav pos">
        <a class="aui-pull-left aui-btn" onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">积分商城</div>
    </header>
    <div class="header-d"></div>
    <!-- 积分商城 -->

    <div class="aui-content aui-margin-b-15 integral-list-t-n">
        <ul class="aui-list aui-list-in">
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">您当前的积分：<span id="score">0</span>分</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title" onclick="integral_order();">兑换记录</div>
                <div class="aui-list-item-right">
                    <div class="aui-label aui-label-info" onclick="change_to_score();" style="background:#00744b">使用红包兑换积分</div>
                </div>
            </div>
        </li>
    </ul>
</div>

<div id="list">
    <div class="integral-list-t">
        <ul class="integral-list-t-t">
            <li >所有类别<i class="fa fa-caret-down"></i></li>
            <li>积分范围<i class="fa fa-caret-down"></i></li>
        </ul>
        <div class="integral-list-t-d">
            <ul>
                <li class="active">不限<i class="fa fa-check"></i></li>
                <li>电器</li>
                <li>家用食材</li>
                <li>汽车用品</li>
                <li>生活用品</li>
            </ul>
            <ul>
                <li class="active">不限<i class="fa fa-check"></i></li>
                <li>电器</li>
                <li>家用食材</li>
                <li>汽车用品</li>
                <li>生活用品</li>
            </ul>
        </div>
    </div>
    <ul class="integral-list-d">
        <li><span>默认排序</span></li>
        <li><span>最新</span></li>
        <li><span>热门</span></li>
        <li><span>积分</span></li>
    </ul>
<!--             <div class="integral-list" id="goods_1">
                <ul>
                    <li>
                        <img src="./image/news.jpg">
                        <dl>
                            <dt>照相机</dt>
                            <dd>所需积分：<span>200</span>分</dd>
                            <dd>购买人数：0人</dd>
                        </dl>
                        <p>查看详情</p>
                    </li>
                </ul>
            </div> -->
        </div>
    </body>
    <script type="text/template" id="template">
        <div class="integral-list-t">
            <ul class="integral-list-t-t">
                <li onclick="cates_list();" id="cate_name">所有类别<i class="fa fa-caret-down"></i></li>
                <li onclick="integral_list();" id="integral_name">积分范围<i class="fa fa-caret-down"></i></li>
            </ul>
            <div class="integral-list-t-d">
                <ul id="cates">
                    {{~it.cates_url:value:index}}
                    <li onclick="chose_cates('{{=value.name}}',{{=value.id}});">{{=value.name}}</li>
                    {{~}}
                </ul>
                <ul id="integral">
                    {{~it.integral_url:value:index}}
                    <li onclick="chose_integral('{{=value.name}}',{{=index}});">{{=value.name}}</li>
                    {{~}}
                </ul>
            </div>
        </div>
        <ul class="integral-list-d" id="sort_integral">
            {{~it.sort_url:value:index}}
            <li liname="{{=index}}" {{? index == 0}}class="active"{{?? }} {{? }} onclick="chose_sort({{=index}});"><span>{{=value.name}}</span></li>
            {{~}}
        </ul>
        <div class="integral-list" id="goods_2">
            <ul>
                {{~it.goods_info:value:index}}
                <li>
                    <div class="integral-list-img"><img src= "{{=value.img}}"></div>
                    <dl>
                        <dt>{{=value.name}}</dt>
                        <dd>所需积分：<span>{{=value.score}}</span>分</dd>
                        <dd>购买人数：{{=value.invented_number}}人</dd>
                    </dl>
                    <p onclick="detail({{=value.id}});">查看详情</p>
                </li>
                {{~}}
            </ul>
        </div>
    </script>
    <!-- 单独商品 -->
    <script type="text/template" id="template_goods">
        <div class="integral-list" goods_div = 'goods_div'>
            <ul>
                {{~it.goods_info:value:index}}
                <li>
                    <div class="integral-list-img"><img src= "{{=value.img}}"></div>
                    <dl>
                        <dt>{{=value.name}}</dt>
                        <dd>所需积分：<span>{{=value.score}}</span>分</dd>
                        <dd>购买人数：{{=value.invented_number}}人</dd>
                    </dl>
                    <p onclick="detail({{=value.id}});">查看详情</p>
                </li>
                {{~}}
            </ul>
        </div>
    </script>
    <!-- 查询时使用的模板 -->
    <script type="text/template" id="integral_select">
        <div class="integral-list-t">
            <ul class="integral-list-t-t">
                <li onclick="cates_list();" id="cate_name">{{? cate_index}}{{=it.cate_value}}<i class="fa fa-caret-down"></i></li>
                <li onclick="integral_list();" id="integral_name">{{=it.integral_value}}<i class="fa fa-caret-down"></i></li>
            </ul>
            <div class="integral-list-t-d">
                <ul id="cates">
                    {{~it.cates_url:value:index}}
                    <li onclick="chose_cates('{{=value.name}}',{{=index}});">{{=value.name}}</li>
                    {{~}}
                </ul>
                <ul id="integral">
                    {{~it.integral_url:value:index}}
                    <li onclick="chose_integral('{{=value.name}}',{{=index}});">{{=value.name}}</li>
                    {{~}}
                </ul>
            </div>
        </div>
        <ul class="integral-list-d" id="sort_integral">
            {{~it.sort_url:value:index}}
            <li liname="{{=index}}" {{? index == 0}}class="active"{{?? }} {{? }} onclick="chose_sort({{=index}});"><span>{{=it.sort_value}}</span></li>
            {{~}}
        </ul>
        <div class="integral-list">
            <ul>
                {{~it.goods_info:value:index}}
                <li>
                    <div class="integral-list-img"><img src= "{{=value.img}}"></div>
                    <dl>
                        <dt>{{=value.name}}</dt>
                        <dd>所需积分：<span>{{=value.score}}</span>分</dd>
                        <dd>购买人数：{{=value.invented_number}}人</dd>
                    </dl>
                    <p onclick="detail({{=value.id}});">查看详情</p>
                </li>
                {{~}}
            </ul>
        </div>
    </script>
    <script type="text/javascript">

        apiready = function(){
            cates_index = '';
            integral_index = '';
            sort_index = '';
            updateData();
            pullLoading();
        }

        // 更新数据,模板函数
        function updateData(more,select) {

            // 进度提示框
            api.showProgress({
                title: '努力加载中...',
                text: '请稍等...',
                modal: false
            });

            // 加载更多 页码+1
            if (more)    {
                p += 1;
            }else {
                p = 1;
            }

            var userid = $api.getStorage('userid');
            // 如果已登录 获取数据
            if (userid) {
                api.ajax({
                    url: webAddress + '/m.php?m=LoanUserInfo&a=integral_score',
                    method: 'post',
                    data: {
                        values: {
                            id: userid,
                        },
                    }
                },function(ret, err){
                    if (ret) {
                        // var ret = $api.jsonToStr(ret);
                        // alert(ret);
                        // 关闭下拉刷新控件
                        api.refreshHeaderLoadDone();
                        // 关闭进度条控件
                        api.hideProgress();
                        if (ret.status == 0) {
                            alert(ret.info);
                            return false;
                        } else {
                            var score = $api.byId('score');
                            score.innerHTML = ret.score;
                        }

                    } else {
                        alert(err.msg);
                        // 关闭下拉刷新控件
                        api.refreshHeaderLoadDone();
                        // 关闭加载状态控件
                        api.hideProgress();
                    }
                });

                api.ajax({
                    url: webAddress + '/index.php?ctl=score&act=integral_list&p=' + p,
                    method: 'post',
                    data: {
                        values: {
                            cates: cates_index,
                            integral: integral_index,
                            sort: sort_index,
                        },
                    }
                },function(ret, err){
                    if (ret) {
                        // var ret = $api.jsonToStr(ret);
                        // alert(ret);

                        // 关闭下拉刷新控件
                        api.refreshHeaderLoadDone();
                        // 关闭加载状态控件
                        api.hideProgress();

                        if (ret.status == 0) {
                            api.toast({
                                msg: '已无更多商品..',
                                duration: 2000,
                                location: 'bottom'
                            });
                            if (select) {
                                $("div[goods_div='goods_div']").remove();
                            }
                            return false;
                        } else {
                            var data = ret.info;
                            // alert($api.jsonToStr(data.integral_url));
                            var goods_info = data['goods_info'];
                            // 处理图片路径
                            for (var i = 0; i < goods_info.length; i++) {
                                goods_info[i].img = goods_info[i].img.substr(1);
                                goods_info[i].img = webAddress + goods_info[i].img;
                            }
                            if (select) {
                                // 搜索走的模板方法
                                var template_goods = $api.byId('template_goods');
                                var dotFn = doT.template(template_goods.innerHTML);
                                var html = dotFn(data);
                                var user = $api.byId('goods_2');
                                $("div[goods_div='goods_div']").remove();
                                // $api.html(user,'');
                                $api.html(user, html);

                            }else{
                                // 除搜索外走的模板方法
                                templateFun(data);
                            }

                        }
                    } else {
                        alert(err.msg);
                        // 关闭下拉刷新控件
                        api.refreshHeaderLoadDone();
                        // 关闭加载状态控件
                        api.hideProgress();
                    }
                });
            }
        }

        // 模板赋值函数
        function templateFun(data) {
            if (p == 1) {
                var template = $api.byId('template');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(data);
                var user = $api.byId('list');
                $api.html(user, html);
            }else{
                var template_goods = $api.byId('template_goods');
                var dotFn = doT.template(template_goods.innerHTML);
                var html = dotFn(data);
                var user = $api.byId('list');
                $api.append(user, html);
            }

        }

        // 查看详情
        function detail(id){

            api.openWin({
                name: 'integral-detail',
                url: './integral-detail.html',
                pageParam: {
                    goods_id: id,
                }
            });
        }

        // 展开分类列表
        function cates_list(){
            $("#integral").stop().slideUp();
            $("#cates").eq($(this).index()).stop().slideToggle();
        }

        // 展开积分范围
        function integral_list(){
            $("#cates").stop().slideUp();
            $("#integral").eq($(this).index()).stop().slideToggle();
        }

        // 选择分类
        function chose_cates(cates,index){
            $("#cates").stop().slideUp();
            var cate_name = $api.byId('cate_name');
            cate_name.innerHTML = '<li id="cate_name">' + cates + '<i class="fa fa-caret-down"></i>';
            cate_name.onclick=function(){
                $("#integral").stop().slideUp();
                $("#cates").eq($(this).index()).stop().slideToggle();
            }

            // 分类下标
            cates_index = index;
            updateData('',true);
        }

        // 选择积分范围
        function chose_integral(integral,index){
            $("#integral").stop().slideUp();
            var integral_name = $api.byId('integral_name');
            integral_name.innerHTML = '<li id="integral_name">' + integral + '<i class="fa fa-caret-down"></i>';
            $('#integral_name').onclick=function(){
              $("#cates").stop().slideUp();
              $("#integral").eq($(this).index()).stop().slideToggle();
          }

          // 积分范围下标
          integral_index = index;
          updateData('',true);
      }

        // 选择排序
        function chose_sort(index){
            // 移除所有active
            $("#sort_integral li").removeClass('active');
            // 给传值的属性添加class
            $("li[liname='"+index+"']").addClass('active');

            // 排序下标
            sort_index = index;
            updateData('',true);
        }

        // 积分兑换记录
        function integral_order(){
            api.openWin({
                name: 'integral-order',
                url: './integral-order.html',
                pageParam: {
                    name: 'test'
                }
            });
        }

        // 上拉加载
        function pullLoading(){
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: 0
                }
            }, function(ret, err){
                updateData(true);
            });
        }

        // 红包兑换积分
        function change_to_score(){
            var delay = 0;
            if (api.systemType != 'ios') {
                // delay = 300;
            }
            api.openWin({
                name: 'red_packet_list',
                url: './red-packet-list.html',
                bounces: false,
                delay: delay,
                slidBackEnabled: true,
                vScrollBarEnabled: false,
                progress: {
                    type: "page"
                },
                pageParam: {
                    backUrl: 'integral'
                },
            });
        }

    </script>
    </html>
